<template>
  <div class="rig">
    <h3>往期回顾</h3>
     <div class="con">
       <template v-if="paper.length>0">
       <div class="tiao" @click="open(pap)" v-for="pap in paper" :key="pap.title">
         <img :src="pap.sign" alt="">
         <div class="trig">
           <p class="title">{{pap.title}}</p>
           <div class="text">{{pap.content.slice(27)+'...'}}</div>
           <p class="date">{{pap.date}}</p>
         </div>
       </div>
       </template>
       <template v-else>
       <div class="tiao" >
         <img :src="require('../../assets/img/sky3.jpg')" alt="">
         <div class="trig">
           <p class="title">暂无数据</p>
         </div>
       </div>
       </template>
     </div>
  </div>
  <el-drawer
      :title="ptitle"
      v-model="drawer"
      direction="ltr"
      size="50%"
       destroy-on-close>
      <span style="padding:0 20px">{{pcontent}}</span>
    </el-drawer>
</template>

<script lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
export default {
  setup(){
    onMounted(()=>{
       getPaper()


       ctx.$bus.off()
       ctx.$bus.on('getp',()=>{
         getPaper()
       })
    })
    //@ts-ignore
    let {ctx}=getCurrentInstance()
    let drawer=ref(false)
    let detp=reactive({
       ptitle:'',
       pcontent:''
    })
    let open=(pap:any)=>{
      drawer.value=true
      detp.ptitle=pap.title
      detp.pcontent=pap.content
    }
    

    let papers=reactive({
       paper:[]
    })
    async function getPaper(){
        let res=await ctx.$axios.get('/getPaper')
        if(res.status===200){
           papers.paper=res.data
        }
    }

    return {
      open,drawer,...toRefs(papers),...toRefs(detp)
    }
  }
};
</script>

<style lang="less" scoped>

.rig{
  width:100%;
  padding: 10px 10px;
  h3{
    text-align: center;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid blue;
    margin-bottom: 20px;
  }
  .con{
    width: 100%;
    
    
    .tiao{
      width: 100%;
      height: 80px;
      margin-top: 5px;
      border: 1px solid blue;
      img{
        display: block;
        width: 40%;
        height: 80px;
        padding: 2px;
        float: left;
      }
      .trig{
        margin-left: 40%;
        width: 60%;
        padding: 2px;
        height: 80px;

        .title{
          font-size: 16px;
          height: 20px;
           white-space: nowrap;
          text-overflow: ellipsis;
        }
        .text{
          height: 40px;
          line-height: 20px;
          white-space: wrap;
          overflow: hidden;
          font-size: 14px;
          border-top: 1px dashed ;
          border-bottom: 1px dashed ;
        }
        .date{
          font-size: 12px;
          height: 20px;
          text-align: right;
        }
      }
    }
  }
}
</style>